import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import "./BigData.css";


type Tab = {
  key: string;
  label: string;
};

type Card = {
  id: string;
  title: string;
  desc: string;
  img: string;
  link: string; // 这里应该是路由路径字符串，而不是组件
};

const tabs: Tab[] = [
  { key: "recommend", label: "精选推荐" },
  { key: "template", label: "设计模板" },
  { key: "video", label: "视频" },
  { key: "audio", label: "音频" },
  { key: "image", label: "图片" },
  { key: "material", label: "设计素材" },
  { key: "doc", label: "办公文档" },
];

const cardData: Record<string, Card[]> = {
  recommend: [
    {
      id: "1",
      title: "教师节海报",
      desc: "825个图片",
      img: "https://img2.baidu.com/it/u=1608584032,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
      link: "/teacher" // 设置为对应的路由路径
    },
    {
      id: "2",
      title: "秋日营销插画",
      desc: "405个图片",
      img: "https://img2.baidu.com/it/u=1819642432,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
      link: "/marketing"
    },
    {
      id: "3",
      title: "视频模板",
      desc: "427个图片",
      img: "https://img2.baidu.com/it/u=1908584032,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
      link: ""
    },
    {
      id: "4",
      title: "音频提琴配乐",
      desc: "50个图片",
      img: "https://img2.baidu.com/it/u=2008584032,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
      link: ""
    },
    {
      id: "5",
      title: "端午节视频模板",
      desc: "56个图片",
      img: "https://img2.baidu.com/it/u=2108584032,3704489962&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
      link: ""
    },
  ],
  // 其他标签同理
  template: [],
  video: [],
  audio: [],
  image: [],
  material: [],
  doc: [],
};

const CARD_PER_PAGE = 5;

const BigData: React.FC = () => {
  // 定义当前激活的标签和页码
  const [activeTab, setActiveTab] = useState<string>("recommend");
  const [page, setPage] = useState(0);
  const navigate = useNavigate(); // 获取导航函数

  // 根据当前激活的标签获取对应的卡片数据
  const cards = cardData[activeTab] || [];
  // 计算总页数
  const totalPage = Math.ceil(cards.length / CARD_PER_PAGE);

  // 切换标签时重置页码
  const handleTabClick = (key: string) => {
    setActiveTab(key);
    setPage(0);
  };

  // 处理卡片点击导航
  const handleCardClick = (link: string) => {
    if (link) {
      navigate(link);
    }
  };

  // 分页
  const showCards = cards.slice(page * CARD_PER_PAGE, (page + 1) * CARD_PER_PAGE);
  return (
    <div className="bigdata-root">
      {/* 顶部标签栏 */}
      <div className="bigdata-tabs">
        {tabs.map((tab) => (
          <div
            key={tab.key}
            className={`bigdata-tab${activeTab === tab.key ? " active" : ""}`}
            onClick={() => handleTabClick(tab.key)}
          >
            {tab.label}
          </div>
        ))}
      </div>
      {/* 素材内容区 */}
      <div className="bigdata-content">
        <div className="bigdata-title">专题 <div className="bigdata-more">查看更多 &gt;</div></div>
        <div className="bigdata-card-list">
          {showCards.map((card) => (
            <div 
              className="bigdata-card" 
              key={card.id} 
              onClick={() => handleCardClick(card.link)}
              style={{ cursor: card.link ? 'pointer' : 'default' }}
            >
              <div className="bigdata-card-img-wrap">
                <img src={card.img} alt={card.title} className="bigdata-card-img" />
              </div>
              <div className="bigdata-card-bottom">
                <div className="bigdata-card-info">
                  <img
                    src="https://img.icons8.com/ios-filled/24/999999/paper.png"
                    alt="icon"
                    className="bigdata-card-icon"
                  />
                  <span className="bigdata-card-title">{card.title}</span>
                </div>
                <div className="bigdata-card-desc">
                  {card.desc}
                  <span
                    className="bigdata-card-arrow"
                    onClick={(e) => {
                      e.stopPropagation(); // 阻止冒泡到卡片上的导航
                      setPage((p) => (p + 1 < totalPage ? p + 1 : 0));
                    }}
                  >
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        {/* 右侧大箭头，滑动到下一页 */}
      </div>
    </div>
  );
};

export default BigData;